import React, { useState, useEffect } from 'react';
import { Alert } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

import sheet from '../styles/sheet';
import { onSortOptions } from '../utils';
import TabBarPage from './common/TabBarPage';

export const ShowMap = (props) => {
    const _mapOptions = Object.keys(MapboxGL.StyleURL)
        .map((key) => {
            return {
                label: key,
                data: MapboxGL.StyleURL[key], // bad any, because enums
            };
        })
        .sort(onSortOptions);

    const [styleURL, setStyleURL] = useState({ styleURL: _mapOptions[0].data });

    const onMapChange = (index, newStyleURL) => {
        setStyleURL({ styleURL: newStyleURL });
    };

    useEffect(() => {
        MapboxGL.locationManager.start();
        return () => {
            MapboxGL.locationManager.stop();
        };
    }, []);

    const onUserMarkerPress = () => {
        Alert.alert('You pressed on the user location annotation');
    };

    return (
        <TabBarPage
            {...props}
            scrollable
            options={_mapOptions}
            onOptionPress={onMapChange}>
            <MapboxGL.MapView styleURL={styleURL.styleURL} style={sheet.matchParent}>
                <MapboxGL.Camera followZoomLevel={12} followUserLocation />

                <MapboxGL.UserLocation onPress={onUserMarkerPress} />
            </MapboxGL.MapView>
        </TabBarPage>
    );
}